<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="msapplication-tap-highlight" content="no">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>首页</title>
  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/bootstrap-4.2.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/user/SUI_Mobile/sm.min.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath }/user/SUI_Mobile/sm-extend.min.css">
  <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/user/css/home.css">
  <style>
    a{
      color:#000;
    }
    .article-end{
      padding: 10px;
      display:none;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 头部，搜索，分类显示 -->
    <header class="header sticky-top">
      <!-- 分类 -->
      <div class="header-title">
        <div class="bar bar-nav">
          <div class="buttons-row">
            <a href="#" class="tab-link button active searchLoseBtn">寻找失物</a>
            <a href="#" class="tab-link button searchLoserBtn">寻找失主</a>
          </div>
        </div>  
      </div>
      <!-- 搜索栏 -->
      <div class="header-search">
        <div class="searchbar row">
          <div class="search-input col-60">
            <label class="icon icon-search" for="search"></label>
            <input type="search" id='search' placeholder='输入关键字...'/>
          </div>
          <a class="button button-fill button-primary col-20">搜索</a>
        </div>
      </div>
    </header>
    <!-- 中间，记录显示 -->
    <article class="article" id="article" onscroll="myScrollToTopFn()">
    
      <!-- 寻找失物 -->
      <div id="searchLose" class="searchLose">
        <section class="items">
          <div class="row item">
            <div class="item-img">
              <a href="detail.jsp"><img src="../../images/bg.jpg"></a>
            </div>
            <div class="item-info col">
              <div class="item-info-top">
                <a href="detail.jsp">
                  <span class="item-info-top-title">寻找女朋友寻找女朋友......</span>
                </a>
                <label class="item-info-top-category">男女朋友</label>
              </div>
              <div class="item-info-detail">
                <a href="detail.jsp">
                  <span>没有女朋友，及寻找女朋友中......</span>
                </a>
              </div>
              <div class="item-info-bottom text-right">
                <time>2019-02-25</time>
              </div>
            </div>
          </div>
        </section>
        <div class="article-end text-center">已经到底啦～</div>
      </div><!-- end of .searchLose -->
      
      <!-- 寻找失主 -->
      <div id="searchLoser" class="searchLoser">
        <section class="items">
          <div class="row item">
            <div class="item-img">
              <a href="detail.jsp"><img src="../../images/2.jpg"></a>
            </div>
            <div class="item-info col">
              <div class="item-info-top">
                <a href="detail.jsp">
                  <span class="item-info-top-title">寻找女朋友寻找女朋友......</span>
                </a>
                <label class="item-info-top-category">男女朋友</label>
              </div>
              <div class="item-info-detail">
                <a href="detail.jsp">
                  <span>没有女朋友，及寻找女朋友中......</span>
                </a>
              </div>
              <div class="item-info-bottom text-right">
                <time>2019-02-25</time>
              </div>
            </div>
          </div>
        </section>     
        <div class="article-end text-center">已经到底啦～</div>
      </div><!-- end of .searchLoser -->
    
    </article>
    <!-- 底部，导航栏 -->
    <footer class="footer">
      <nav class="bar bar-tab">
        <a class="tab-item active goToTopA" href="../01/home.jsp">
          <span class="icon icon-home goToTopIcon"></span>
          <span class="tab-label goToTopInfo">首页</span>
        </a>
        <a class="tab-item" href="../02/issue.jsp">
          <span class="icon icon-edit"></span>
          <span class="tab-label">发贴</span>
        </a>
        <a class="tab-item" href="${pageContext.request.contextPath }/message?method=getInfoList&uid=${user.uid}">
          <span class="icon icon-message"></span>
          <span class="tab-label">信息</span>
        </a>
        <a class="tab-item" href="../04/me.jsp">
          <span class="icon icon-me"></span>
          <span class="tab-label">我</span>
        </a>
      </nav>
    </footer>
  </div> <!-- end of .container -->

  <script type='text/javascript' src='${pageContext.request.contextPath }/user/SUI_Mobile/zepto.min.js' charset='utf-8'></script>
  <script type='text/javascript' src='${pageContext.request.contextPath }/user/SUI_Mobile/sm-extend.min.js' charset='utf-8'></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-3.3.1.min.js" charset="utf-8"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath }/bootstrap-4.2.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
    // 获取滚动的元素
    var scrollArticle = document.getElementById("article")
    // 回到顶部函数
    function myScrollToTopFn() {
      // 获取滚动后的scrollTop值
      var articleScrollTop = scrollArticle.scrollTop 
      // 滚动一定距离后，显示回到顶部标识；否则复原
      if ( articleScrollTop > 200 ) {
        $('.goToTopIcon').removeClass('icon-home')
        $('.goToTopIcon').addClass('icon-up')
        $('.goToTopInfo').text('返回顶部')
        $('.goToTopA').attr('href','#')   // 去掉相对路径
        $('.goToTopA').on('click', function () {
          // 平滑的滚回到顶部
          scrollArticle.scrollTo({top:0,behavior:'smooth'})
        })
        $('.article-end').css('display','block')
      } else {
        $('.goToTopIcon').removeClass('icon-up')
        $('.goToTopIcon').addClass('icon-home')
        $('.goToTopInfo').text('首页')
        $('.goToTopA').attr('href','../01/home.jsp')  // reload current page
        $('.article-end').css('display','none')
      }
    } // end of myScrollToTopFn()
    $(function(){
      // 显示寻找失主的div
      $('.searchLoserBtn').on('click', function () {
        $('.searchLoseBtn').removeClass('active')
        $(this).addClass('active')
        $('#searchLose').hide()
        $('#searchLoser').show()
        scrollArticle.scrollTop = 0
      })
      // 显示寻找失物主的div
      $('.searchLoseBtn').on('click', function () {
        $('.searchLoserBtn').removeClass('active')
        $(this).addClass('active')
        $('#searchLoser').hide()
        $('#searchLose').show()
        scrollArticle.scrollTop = 0
      })
    }) // end of $(function(){})
  </script>
</body>
</html>